@import 'var';
@import 'normalize';
@import 'index';
@define-extend li {
  display: inline;
  float: left;

  list-style: none;
}
html {
  min-width: $minWidth;
}
.page-center {
  box-sizing: border-box;
  max-width: $maxWidth;
  margin: auto;
  padding: 0 10px;
}
/***************************头部*************************************/
.layout-header {
  border-bottom: 1px solid #dcdcdc;
  box-shadow: 0 0 5px rgba(131, 130, 130, .77);
}
.header {
  font-size: 12px;

  position: relative;
  z-index: 9;
  .page-center {
    height: 86px;
  }
  .logo-header {
    float: left;

    list-style: none;
  }
  .nav-header {
    float: right;

    list-style: none;
    .nav-download {
      cursor: pointer;
      a:hover {
        background: #de903d;
      }
    }
    li {
      margin: 30px 0 0 28px;
      padding-bottom: 5px;

      @extend li;
      .download-header {
        padding: 5px 28px 5px 28px;

        color: $white;
        border-radius: 3px;
        background-color: $txt-color;
      }
      &.current {
        border-bottom: 2px solid $txt-color;
        a {
          color: $txt-color !important;
        }
      }
    }
  }
  a {
    text-decoration: none;

    color: #555;
  }
  a:hover {
    color: $txt-color;
  }
}
/***************************页脚************************************/
.footer {
  font-size: 12px;

  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  min-width: $minWidth;

  text-align: left;

  color: #878686;
  background-color: #343434;
  .page-center {
    padding: 32px 0;

    text-align: center;
    img {
      float: left;

      margin-top: 1px;
    }
    .left-footer,
    .right-footer {
      display: inline-block;

      text-align: left;
      vertical-align: top;
    }
    .left-footer {
      .QRcode {
        display: inline-block;

        width: 116px;
        height: 62px;
        padding: 6px;

        vertical-align: top;

        background-color: #272727;
      }
      .QRcode-beta {
        div {
          font-size: 12px;

          float: left;

          width: 39px;
          height: 39px;
          margin: 14px 0 0 12px;
        }
      }
      .QRcode-beauties {
        margin-left: 15px;
        div {
          font-size: 12px;

          float: left;

          width: 48px;
          height: 48px;
          margin: 14px 0 0 6px;
        }
      }
    }
    .right-footer {
      margin-left: 40px;

      white-space: nowrap;
      .icon-img {
        float: left;

        width: 17px;
        height: 20px;
        margin-right: 10px;

        background-image: resolve(icon_footer.png);
      }
      .location {
        background-position: 0 -9px;
      }
      .email {
        background-position: 0 -35px;
      }
      .qq {
        margin-left: 43px;

        background-position: 0 20px;
      }
      .tel {
        background-position: 0 43px;
      }
      .contact-footer {
        margin: 10px 0 10px 0;
        a {
          float: left;

          text-decoration: none;

          color: #878686;
        }
        a:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .copyright {
    font-size: 12px;
    line-height: 45px;

    height: 45px;

    text-align: center;

    color: #878686;
    background-color: #272727;
  }
}
/***************************浮层************************************/
.mask {
  position: fixed;
  z-index: 99;
  top: 0;

  width: 100%;
  height: 100%;
}
.opacity {
  opacity: .5;
  background-color: #000;

  filter: alpha(opacity=30);
}
/***************************下载弹框************************************/
.download-box {
  position: fixed;
  z-index: 999;
  top: 228px;
  right: 0;
  left: 0;

  width: 336px;
  height: 210px;
  margin: auto;
  margin-left: auto;

  text-align: center;

  border-radius: 10px;
  background-color: white;
  .dow-left {
    padding: 39px 15px 39px 0;
    img {
      vertical-align: text-top;
    }
  }
  .dow-right {
    div {
      margin-top: 20px;
    }
    .dow-txt {
      font-size: 18px;
    }
    .dow-style {
      width: 134px;
      height: 34px;

      border-radius: 5px;
      background-color: $txt-color;
      background-repeat: round;
    }
    .dow-ios {
      background-image: resolve(icon_ios.png);
    }
    .dow-andr {
      background-image: resolve(icon_and.png);
    }
  }
}
/**************顶部导航*************/
.nav {
  position: relative;

  width: 100%;
  height: 285px;
  margin: 0;
  padding: 0;

  text-align: center;

  background: resolve(bg_search.png) center;
  background-size: cover;
  .nav-title {
    font-size: 38px;
    line-height: 45px;

    padding-top: 77px;

    color: #fff;
    img {
      margin-right: 20px;

      vertical-align: bottom;
    }
  }
  .nav-items {
    font-size: 22px;

    height: 50px;
    margin: auto;

    color: #fff;
    ul {
      margin-top: 38px;
      li {
        display: inline-block;

        padding: 0 18px;

        list-style: none;
        a {
          line-height: 42px;

          display: block;

          height: 50px;
          padding: 0 20px;

          cursor: pointer;

          color: #fff;
          &:hover {
            color: $black;
          }
          &.active {
            cursor: default;

            background: resolve(icon-title.png) no-repeat center;
            background-size: 100% 100%;
            &:hover {
              color: $white;
            }
          }
        }
      }
    }
  }
}

/******************加载中****************/
#ajaxGif {
  position: fixed;
  z-index: 10000000;
  top: 0;
  left: 0;

  display: none;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, .2);
}
#ajaxGif::after {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 284px;
  height: 115px;
  margin-top: -57.5px;
  margin-left: -142px;

  content: '';

  border-radius: 7px;
  background: #fff url(../loading.gif) no-repeat center;
  background-size: 38px;
  box-shadow: 0 0 7px rgba(0, 0, 0, .25), 0 2px 18px rgba(0, 0, 0, .03);
}
